import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders, ScaleLinear, imgPromise } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly3.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';
import Ground2D from '../jsm/Ground2D.js'

window.onload = function () {

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    //开始背景遮挡
    gl.enable(gl.DEPTH_TEST);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);


    let max = 1;
    let allArr = [
        -0.5, -0.8, 10, 0, 0,
        -0.5, 0.8, 10, 0, max,
        0.5, -0.8, 10, max, 0,
        0.5, 0.8, 10, max, max,

    ];

    let mm4 = new Matrix4();

    let u_Mm4 = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
    gl.uniformMatrix4fv(u_Mm4, false, mm4.elements)




    let poly = new Poly({
        gl: gl,
        arr: allArr,
        list: [
            { name: 'a_Position', size: 2, beginIndex: 0 },
            { name: 'a_PointSize', size: 1, beginIndex: 2 },
            { name: 'a_Pin', size: 2, beginIndex: 3 },
        ],
    });

    poly.draw(["TRIANGLE_STRIP"]);


    const image = new Image();
    image.src = '../Images/Image01.png';
    //这种导入方法只能导入图片长宽为2的N次方大小的图片
    image.onload = function () {

        poly.texture = {
            'u_Sampler': {
                image: image,
                WRAP_W: gl.CLAMP_TO_EDGE,
                WRAP_H: gl.CLAMP_TO_EDGE,
            }
        };
        poly.updateTexture();
        poly.draw(["TRIANGLE_STRIP"])

    };





}